<template>
  <div>
    <Form :validOnChange="true" :model="model">
      <FormItem label="Nacos服务" prop="configId">
        <Select :datas="configData" v-model="model.configId"></Select>
      </FormItem>
      <FormItem label="服务名">
        <input type="text" v-model="model.serviceName" />
      </FormItem>
      <FormItem label="路径">
        <input type="text" v-model="model.path" />
      </FormItem>
      <FormItem label="数据类型">
        <AutoComplete :must-match="false" :option="param" :datas="contentTypeData" v-model="model.contentType" type="title"></AutoComplete>
      </FormItem>
      <FormItem label="请求方式">
        <AutoComplete :must-match="false" :option="param" :datas="methodData" v-model="model.method" type="title"></AutoComplete>
      </FormItem>
      <FormItem label="成功条件">
        <input v-model="model.success" type="text" />
      </FormItem>
      <FormItem label="数据域名">
        <input v-model="model.dataKey" type="text" />
      </FormItem>
      <FormItem label="响应格式">
        <Select :datas="dataType" v-model="model.dataType"></Select>
      </FormItem>
    </Form>
    <div slot="footer">
      <Button :block="true" text-color="primary" @click="save">确认</Button>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.$axios.post("/nacosconfigs/select").then((res) => {
      this.configData = res.data.data;
    });
  },
  data() {
    return {
      configData: [],
      nodeType: "",
      methodData: [
        { keyId: "GET", title: "GET" },
        { keyId: "POST", title: "POST" },
        { keyId: "PUT", title: "PUT" },
        { keyId: "DELETE", title: "DELETE" },
      ],
      dataType: [
        { keyId: "list", title: "JSON集合" },
        { keyId: "object", title: "JSON对象" },
        { keyId: "string", title: "字符文本" },
        { keyId: "bytes", title: "文件流" },
      ],
      contentTypeData: [
        {
          keyId: "application/json;charset=utf-8",
          title: "application/json;charset=utf-8",
        },
        { keyId: "multipart/form-data", title: "multipart/form-data" },
        {
          keyId: "application/octet-stream",
          title: "application/octet-stream",
        },
        { keyId: "text/html", title: "text/html" },
        { keyId: "text/plain", title: "text/plain" },
      ],
      model: {
        contentType: "",
        method: "",
        success: "code == 0000",
        dataKey: "data",
        dataType: "list",
      },
      param: {
        keyName: "keyId",
        titleName: "title",
      },
    };
  },
  methods: {
    initInfo(data) {
      if (!!data) {
        this.model = data;
      }
    },
    save() {
      this.$emit("setContent", this.model);
    },
  },
  deactivated() {
    this.$destroy(true);
  },
};
</script>
